---
type Props = {
  class?: string;
};

const { class: className } = Astro.props;
---

<clerk-signed-in
  class={className}
  hidden
>
  <slot />
</clerk-signed-in>

<script>
  import { type AuthState, BaseClerkControlElement } from './BaseClerkControlElement';

  class ClerkSignedIn extends BaseClerkControlElement {
    protected onAuthStateChange(state: AuthState): void {
      if (state.userId) {
        this.removeAttribute('hidden');
      } else {
        this.setAttribute('hidden', '');
      }
    }
  }

  customElements.define('clerk-signed-in', ClerkSignedIn);
</script>
